blob: 8b8764d0f06dd5f37da8bcc5a3bff4cc1b2eee7d (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<script lang="ts">
import Senpy from '$lib/Data/senpy';
import Message from '$lib/Loading/Message.svelte';
import Skeleton from '$lib/Loading/Skeleton.svelte';
import '$styles/girls.scss';
export let data;
</script>
<div class="card">
{#await Senpy.getImages(data.language)}
<Message message="Loading images ..." />
<Skeleton grid={true} count={1} width="49%" height="16.25em" />
{:then images}
<div class="images">
{#each images as image}
<a href={image} target="_blank">
<div class="preview">
<img src={image} alt="An anime girl holding a programming book" />
</div>
</a>
{/each}
</div>
{/await}
</div>
<style lang="scss">
.images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16.25em, 1fr));
gap: 1em;
img {
border-radius: 8px;
width: 100%;
}
}
</style>
|